import './App.css';
import React, { useCallback, useEffect, useState } from 'react';
import UseReduce from '@/components/UseReduce'
import ReactMemo from '@/components/ReactMemo'
import UseCallback from '@/components/UseCallback'
import FetchApi from '@/components/FetchApi'
import RTK from '@/components/RTK'
import {Provider} from 'react-redux'
import store from '@/store';
import RTKQ from '@/components/RTKQ'

function App() {
  console.log('APP 渲染')

  const [redText, setRedText] = useState(true)
  const pStyle = { color: redText ? 'red' : 'blue' }
  const changeColor = () => {
    setRedText(false)
  }


  const [count, setCount] = useState(0)
  const a = 10
  /**
   * useEffect 
   * @param {function} 组件渲染完后执行
   *    ==> @param {function} Effect 回调函数中，指定一个函数作为返回值
   *                                 清理函数 ==> 下次Effect 执行前调用
   * @param {array} 指定 Effect 的依赖项，依赖项变化执行
  */
  //#region
  useEffect(()=>{
    // setCount(1)
    const timer = setTimeout(() => {
      console.log('effect 变化了')
    }, 1000)
    return () => {
      console.log('effect 返回函数执行了')
      clearTimeout(timer)
    }
  }, [count, a])
  //#endregion


  /**
   * UseCallback
   * 创建 React 中的回调函数
   * 不会总在组件重新渲染是重新创建
   * @param {function} 逻辑处理
   * @param {array} 依赖数组，数组中变量发生变化时，回调函数才会重新创建
  */
  const [num, setNum] = useState(1)
  const clickHandle = useCallback(() => {
    setCount(pre => pre + num)
    setNum(pre => num + 1)
  }, [num])
  return (
    // React.Fragment
    // 一个专门作为父容器的组件
    <React.Fragment>
      <div style={{ display: 'none' }}>
        <p style={pStyle}>react</p>
        <button onClick={changeColor}>点击</button>
        <hr></hr>
      </div>

      <div>{count}</div>
      <button onClick={clickHandle}>点击修改state</button>
      <hr></hr>
      <UseReduce></UseReduce>
      <hr></hr>
      <ReactMemo></ReactMemo>
      <hr></hr>
      <UseCallback onAdd={clickHandle}></UseCallback>
      <hr></hr>
      <FetchApi></FetchApi>
      <hr></hr>
      <Provider store={store}>
        <RTK></RTK>
      </Provider>
      <hr></hr>
      <Provider store={store}>
        <RTKQ></RTKQ>
      </Provider>
    </React.Fragment>
  );
}

export default App;
